<route lang="yaml">
meta:
  title: 数据信息
</route>

<script setup lang="ts">
const metrics = [
  { title: '发布量', unit: '条', icon: 'i-ep:document', color: 'text-blue-600' },
  { title: '收益额', unit: '元', icon: 'i-ep:money', color: 'text-green-600' },
  { title: '浏览量', unit: '次', icon: 'i-ep:view', color: 'text-purple-600' },
  { title: '新增用户', unit: '个', icon: 'i-ep:user', color: 'text-pink-600' },
  { title: '套餐数量', unit: '条', icon: 'i-ep:collection', color: 'text-orange-600' },
  { title: '新增稿件数', unit: '条', icon: 'i-ep:document-add', color: 'text-teal-600' },
  { title: '高质量稿件次数', unit: '次', icon: 'i-ep:star', color: 'text-indigo-600' },
  { title: '新增提取次数', unit: '条', icon: 'i-ep:refresh', color: 'text-red-600' },
]
</script>

<template>
  <div>
    <FaPageMain>
      <div class="text-large mb-2 font-600">
        今日数据
      </div>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        <FaCard v-for="(m, idx) in metrics" :key="idx" class="p-4">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <FaIcon :name="m.icon" class="size-4" :class="m.color" />
              <span class="text-sm text-muted-foreground">{{ m.title }}</span>
            </div>
            <FaIcon name="i-ep:info-filled" class="size-4 text-muted-foreground/60" />
          </div>
          <div class="mt-3 flex items-end gap-1">
            <div class="text-2xl font-700">
              0
            </div>
            <div class="text-sm text-muted-foreground">
              {{ m.unit }}
            </div>
          </div>
          <div class="mt-3 flex items-center text-xs text-muted-foreground">
            <span>昨日 0</span>
            <span class="mx-2">•</span>
            <span>较昨日 —</span>
          </div>
        </FaCard>
      </div>
    </FaPageMain>
  </div>
</template>
